import React, { memo } from 'react';
import { Row, Col, Icon, Tooltip } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import numeral from 'numeral';
import styles from './orderAnalysis.less';
import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from '@/components/Charts';
import Trend from '@/components/Trend';
import Yuan from '@/utils/Yuan';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 8,
  style: { marginBottom: 10 },

};

const IntroduceRow = memo(({ loading, orderData, flowData, stockData }) => (
  <Row gutter={18}>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title={"Daily In & Out volume（By Pallet）"}
        action={
          <Tooltip
            title={<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce" />}
          >
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total={(<div style={{ fontSize: 20, display: 'flex', flexDirection: 'row', lineHeight: 1.1 }}  ><span ><span style={{fontSize:16,color:'rgba(0, 0, 0, 0.45)'}} >In &nbsp;</span>{flowData.countIn}</span><span style={{ margin: '0px 8px', fontSize: 16 }} ></span><span><span style={{fontSize:16,color:'rgba(0, 0, 0, 0.45)'}} >Out &nbsp;</span>{flowData.countOut}</span></div>)}
        footer={
          <Field
            label={'Daily In & Out volume'}
            value={numeral(flowData.countIn + flowData.countOut).format('0,0')}
          />
        }
        contentHeight={46}
      >
        <MiniArea color="#975FE4" data={flowData.volume} />
      </ChartCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title={'Real-time Inventory（By Pallet）'}
        action={
          <Tooltip
            title={<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce" />}
          >
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total={numeral(stockData.palletCount).format('0,0')}
        footer={
          <Field
            label={
              "Utilization rate"
            }
            value={`${stockData.utlilization}%`}
          />
        }
        contentHeight={46}
      >
        <MiniBar data={stockData.stockStatistics} />
      </ChartCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        loading={loading}
        bordered={false}
        title={
          ' Monthly Orders（By Shipment）'
        }
        action={
          <Tooltip
            title={<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce" />}
          >
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total={orderData.orderCountMonth}
        footer={
          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
            <Trend flag="up" style={{ marginRight: 16 }}>
              Year on week
              <span className={styles.trendText}> - %</span>
            </Trend>
            <Trend flag="down">
              Year on day
              <span className={styles.trendText}> - %</span>
            </Trend>
          </div>
        }
        contentHeight={46}
      >
        <MiniProgress
          percent={orderData.orderCountTarget - orderData.orderCountCompletion <= 0 ? 100 : Number(parseFloat(orderData.orderCountCompletion / orderData.orderCountTarget * 100).toFixed(0))}
          strokeWidth={8}
          target={100}
          targetLabel={`${formatMessage({ id: 'component.miniProgress.tooltipDefault' }).concat(
            ': '
          )}${orderData.orderCountTarget}`}
          color="#13C2C2"
        />
      </ChartCard>
    </Col>
  </Row>
));

export default IntroduceRow;
